/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState, useEffect } from 'react';
import {
  Space,
  Row,
  Col,
  Card,
  Image,
  Typography,
  Pagination,
  Divider,
  Tag,
  List,
  Rate,
} from 'antd';
import { PageContainer } from '@ant-design/pro-layout';
import { Line } from '@ant-design/charts';
import { request } from 'umi';

const { Title } = Typography;

const index: React.FC = () => {
  const [data, setData] = useState([]);

  const [allConsultantSessionNum, setallConsultantSessionNum] = useState(0);
  const [allsupervisorSessionNum, setallsupervisorSessionNum] = useState(0);
  const [allAliveConsultants, setallAliveConsultants] = useState([]);
  const [allConsultants, setallConsultants] = useState([]);
  const [topkSession, settopkSession] = useState([]);
  const [topKRank, settopKRank] = useState([]);
  const [topKRank1, settopKRank1] = useState([]);
  const [topKRank2, settopKRank2] = useState([]);
  const getNameById = (id) => {
    if (id == undefined) {
      return '';
    }
    const t = data.filter((item) => item.consultant_id == id);
    if (t.length === 0) {
      return '';
    }
    return t[0].name;
  };

  useEffect(() => {
    request('http://localhost:8080/consultant/getAll')
      .then((res) => {
        setData(res.payload);
      })
      .catch((error) => {
        console.log(error);
      });
    request('http://localhost:8080/consultant/getAllSessionNumber')
      .then((res) => {
        setallConsultantSessionNum(res.payload);
      })
      .catch((error) => {
        console.log(error);
      });
    request('http://localhost:8080/supervisor/getAllSessionNumber')
      .then((res) => {
        setallsupervisorSessionNum(res.payload);
      })
      .catch((error) => {
        console.log(error);
      });
    request('http://localhost:8080/consultant/getAllAlive')
      .then((res) => {
        setallAliveConsultants(res.payload);
      })
      .catch((error) => {
        console.log(error);
      });
    request('http://localhost:8080/consultant/getAll')
      .then((res) => {
        setallConsultants(res.payload);
      })
      .catch((error) => {
        console.log(error);
      });
    request('http://localhost:8080/consultant/getTopKByConsultNumber/3/4')
      .then((res) => {
        settopkSession(res.payload);
      })
      .catch((error) => {
        console.log(error);
      });
    request('http://localhost:8080/consultant/getTopKByGrade/3/4')
      .then((res) => {
        settopKRank(res.payload);
      })
      .catch((error) => {
        console.log(error);
      });
    request('http://localhost:8080/administrator/getAllConsultNumberLimitK/4/5')
      .then((res) => {
        settopKRank1(res.payload);
      })
      .catch((error) => {
        console.log(error);
      });
    request('http://localhost:8080/administrator/gettodayConsultNumberLimitK/4/20/5')
      .then((res) => {
        settopKRank2(res.payload);
      })
      .catch((error) => {
        console.log(error);
      });
    request('/api/currentUser')
      .then((res) => {
        console.log(res.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  const graph1 = () => {
    const data = topKRank2;

    const config = {
      data,
      height: 200,
      xField: 'date',
      yField: 'number',
      point: {
        size: 5,
        shape: 'diamond',
      },
    };
    return (
      <Card style={{ height: 280 }}>
        <Title level={5}>今日咨询数量变化</Title>
        <Line {...config} />
      </Card>
    );
  };

  /** 人头卡片 */
  const card1 = () => {
    return (
      <Card style={{ height: 280, textAlign: 'center' }}>
        <Title level={3}>管理员</Title>
        <Space>
          <Image
            width={150}
            height={170}
            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
          />
        </Space>
      </Card>
    );
  };

  /** 今日咨询数卡片*/
  const card2 = () => {
    return (
      <Card style={{ height: 280, width: 350, textAlign: 'center' }}>
        <Row gutter={12}>
          <Col span={12}>
            <Space direction="vertical">
              <Title level={3}>咨询会话数目</Title>
              <Title level={4}>{allConsultantSessionNum}</Title>
            </Space>
          </Col>
          <Col span={12}>
            <Space direction="vertical">
              <Title level={3}>督导会话数目</Title>
              <Title level={4}>{allsupervisorSessionNum}</Title>
            </Space>
          </Col>
        </Row>
      </Card>
    );
  };

  /** 第一排 */
  const line1 = () => {
    return (
      <Row gutter={16}>
        <Col span={12}>
          <div>
            <Row gutter={16}>
              <Col span={10}>{card1()}</Col>
              <Col span={12}>{card2()}</Col>
            </Row>
          </div>
        </Col>
        <Col span={12}>{graph1()}</Col>
      </Row>
    );
  };

  /**在线列表 */
  const list1 = () => {
    const alives = () => {
      return allAliveConsultants.map((consultant) => {
        let free = consultant.is_free == 1 ? '空闲' : '忙碌';
        let name = consultant.name;
        let color = consultant.is_free == 1 ? 'green' : 'red';
        return (
          <Col span={8}>
            {name} <Tag color={color}>{free}</Tag>
          </Col>
        );
      });
    };

    return (
      <Card style={{ height: 200, textAlign: 'center' }}>
        <Title level={3}>督导会话数目</Title>
        <Divider />
        <Row gutter={[8, 16]}>{alives()}</Row>
      </Card>
    );
  };

  const line2 = () => {
    return (
      <Row gutter={16}>
        <Col span={12}>{list1()}</Col>
        <Col span={6}>
          <Card style={{ height: 200 }}>
            <Title level={3}>在线咨询师数目</Title>
            <Title level={4}>{allAliveConsultants.length}</Title>
          </Card>
        </Col>
        <Col span={6}>
          <Card style={{ height: 200 }}>
            <Title level={3}>注册咨询师数目</Title>
            <Title level={4}>{allConsultants.length}</Title>
          </Card>
        </Col>
      </Row>
    );
  };

  /**第三行的图 */
  const graph2 = () => {
    const data = topKRank1;
    const config = {
      data,
      height: 200,
      xField: 'date',
      yField: 'number',
      point: {
        size: 5,
        shape: 'diamond',
      },
    };
    return (
      <Card style={{ height: 280 }}>
        <Title level={5}>四月咨询数量统计</Title>
        <Line {...config} />
      </Card>
    );
  };

  /**排名 */
  const list2 = () => {
    const data = [];
    topkSession.map((item) => {
      let id = item.consultant_id;
      let name = id == undefined ? '' : getNameById(id);
      let session = item.monthNumber;
      data.push({ name: name, today_finished_consult: session });
    });
    return (
      <Card style={{ height: 280 }}>
        <Title level={5}>咨询数目排名</Title>
        <List
          size="small"
          itemLayout="horizontal"
          dataSource={data}
          renderItem={(item) => (
            <List.Item>
              {item.name}
              <Tag style={{ float: 'right' }}>{item.today_finished_consult}</Tag>
            </List.Item>
          )}
        />
      </Card>
    );
  };

  /**排名 */
  const list3 = () => {
    const data = [];
    topKRank.map((item) => {
      let id = item.consultant_id;
      let name = id == undefined ? '' : getNameById(id);
      let grade = item.grade;
      data.push({ name: name, grade: grade });
    });
    return (
      <Card style={{ height: 280 }}>
        <Title level={5}>咨询好评排名</Title>
        <List
          size="small"
          itemLayout="horizontal"
          dataSource={data}
          renderItem={(item) => (
            <List.Item>
              {item.name}
              <Tag style={{ float: 'right' }}>{item.grade}</Tag>
            </List.Item>
          )}
        />
      </Card>
    );
  };

  const line3 = () => {
    return (
      <Row gutter={16}>
        <Col span={12}>{graph2()}</Col>
        <Col span={6}>{list2()}</Col>
        <Col span={6}>{list3()}</Col>
      </Row>
    );
  };

  return (
    <PageContainer>
      <Space direction="vertical">
        {line1()}
        {line2()}
        {line3()}
      </Space>
    </PageContainer>
  );
};

export default index;
